<template>
  <div id="contain">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">{{ infoList.name }}</span>
        <el-button type="text" style="float: right; padding: 10px 5px; font-size: 18px" @click="back2Home">返回首页</el-button>
      </div>
      <div style="padding: 10px 0 25px 10px">
        <div>
          <img :src="infoList.pic" alt="图片加载失败" class="imgbox" />
        </div>
        <div class="intro">
          <p style="margin: 10px 0">
            <span class="intospan">地址：</span>{{ infoList.address }}
          </p>
          <p style="color:#888">
            <span class="intospan">介绍：</span>{{ infoList.introduction
            }}{{ infoList.introduction }}{{ infoList.introduction }}
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: window.localStorage.getItem("token"),
      areId: this.$route.query.areId,
      infoList: {},
    };
  },
  mounted() {
    this.getInfo();
  },

  methods: {
    back2Home() {
      if (this.$route.query.fromwhere) {
        this.$router.push({ path: '/', query: {activeIndex: '0'}})
        return
      }
      this.$router.push({ path: '/', query: {activeIndex: '1'}})
    },
    getInfo() {
      this.$axios({
        method: "post",
        url: "/static/scenicarea/info",
        data: { areaId: this.areId },
      }).then((res) => {
        this.infoList = res.data.page;
        // console.log(this.infoList);
      });
    },
  },
};
</script>
<style scoped>
#contain {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
}
.imgbox {
  width: 500px;
  height: 300px;
}
.clearfix {
  height: 40px;
}
.title {
  font-size: 28px;
  color: orange;
}
.intro {
  width: 1000px;
}
.intospan {
  margin-left: 5px;
  color: orange;
  font-size: 18px;
}</style
>>
